import { observer } from "mobx-react";
import { Tooltip } from 'antd';
import DataSet from "./DataSet";
import Table from "./Table";
import Field from './Field';
import FieldHtmlType from "./FieldHtmlType";
import FieldType from "./FieldType";
import FieldLabel from "./FieldLabel";
import FieldColumnName from "./FieldColumnName";
import FieldDbName from "./FieldDbName";
import FieldTableName from "./FieldTableName";
import Selections from "./Selections";
import FieldDbType from "./FieldDbType";
import ExpandType from "./ExpandType";
import AddRow from "./AddRow";
import DeleteRow from "./DeleteRow";
import DataCondition from "./DataCondition";
import ConditionsettingDialog from '../../../dialog/ConditionsettingDialog';
import ImageWidth from "./ImageWidth";
import ImageHeight from "./ImageHeight";
import TextLength from "./TextLength";
import FloatLength from "./FloatLength";
import FieldViewType from "./FieldViewType";
import FieldVisible from "./FieldVisible";
import ParentFieldName from './ParentFieldName';
@observer
export default class FieldProps extends React.Component {
    render() {
        const { store } = this.props;
        const { fieldProps,readonly } = store;
        const { tabs, selectedTabKey, selectedIndex, dataSetList, content, isField, label,columnName, dbName, tableName, htmlType, viewAttr, fieldVisible, type, isAddRow, isDeleteRow, changeRowControl, table,
            changeFieldLabel, changeDataSet, options, dbType, tableOptions, tableFieldOptions, changeDataSetTable,changeViewAttr, changeFieldVisible,
            dataSet, dsTable, dsField, changeDataSetField, visible,imageWidth, imageHeight, changeImageWidth, changeImageHeight,textLength,changeTextLength,changeFloatLength,
            floatLength,hasData,isCustomDetail, showExpandType,changeExpandType,expandType, parentFieldName } = fieldProps;

            return (
            <div className="edc-field-props" style={visible ? {} : { right: -320 }}>
                <div className={`toggle${visible ? '' : ' toggle-hidden'}`} onClick={fieldProps.toggle}></div>
                <ol className="edc-tab-nav">
                    {tabs.map((tab, index) => (
                        tab.disabled ?
                            <li className="disabled" key={tab.key} >
                                {index === 0 && <div className="edc-tab-nav-bg" style={{ transform: `translateX(${selectedIndex * 100}%)` }}></div>}
                                <div className="edc-tab-nav-icon">
                                    <i className={tab.icon}></i>
                                </div>
                            </li> :
                            <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@e3ci1j@${index}`} title={tab.title} placement="bottom" >
                                <li className={selectedTabKey === tab.key ? 'selected' : undefined} key={tab.key} onClick={this.clickItem.bind(this, tab.key)}>
                                    {index === 0 && <div className="edc-tab-nav-bg" style={{ transform: `translateX(${selectedIndex * 100}%)` }}></div>}
                                    <div className="edc-tab-nav-icon">
                                        <i className={tab.icon}></i>
                                    </div>
                                </li>
                            </Tooltip>
                    ))}
                </ol>
                <div className="edc-tab-content">
                    {selectedTabKey === '0' && <div>
                        <FieldLabel ecId={`${this && this.props && this.props.ecId || ''}_FieldLabel@ol74vg`} isField={false} style={{ width: '100%' }} value={content ? content + "" : content} ></FieldLabel>
                        <DataSet ecId={`${this && this.props && this.props.ecId || ''}_DataSet@8fj7tk`} value={dataSet} options={dataSetList.slice()} style={{ width: '100%' }} onChange={changeDataSet}></DataSet>
                        <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@hw49ji`} value={dsTable} style={{ width: '100%' }} options={tableOptions} onChange={changeDataSetTable}></Table>
                        <Field ecId={`${this && this.props && this.props.ecId || ''}_Field@dbamde`}
                            before={{
                                value: dsField,
                                onChange: changeDataSetField,
                                style: { width: '100%' },
                                options: tableFieldOptions
                            }}
                            after={{
                                style: { width: '20%' }
                            }} />
                        <DataCondition ecId={`${this && this.props && this.props.ecId || ''}_DataCondition@f2q9t6`} store={store}></DataCondition>
                        <ConditionsettingDialog ecId={`${this && this.props && this.props.ecId || ''}_ConditionsettingDialog@kkhfer`} store={store} />
                    </div>}
                    {selectedTabKey === '1' && <div>
                        {(isField || true) && <FieldLabel ecId={`${this && this.props && this.props.ecId || ''}_FieldLabel@y1hdv2`} value={label ? label+"" : label} isField={true} style={{ width: '100%' }} disabled={readonly} onChange={changeFieldLabel} ></FieldLabel>}
                        {isField && <FieldColumnName ecId={`${this && this.props && this.props.ecId || ''}_FieldColumnName@d08m1f`} value={columnName} isField={true} style={{ width: '100%' }} disabled={true} ></FieldColumnName>}
                        {isField && <FieldDbName ecId={`${this && this.props && this.props.ecId || ''}_FieldDbName@ia28c6`} value={dbName} isField={true} style={{ width: '100%' }} disabled={true} ></FieldDbName>}
                        {isField && <FieldTableName ecId={`${this && this.props && this.props.ecId || ''}_FieldTableName@q7kpj2`} value={tableName} isField={true} style={{ width: '100%' }} disabled={true} ></FieldTableName>}
                        <FieldHtmlType ecId={`${this && this.props && this.props.ecId || ''}_FieldHtmlType@4mjarf`} disabled={true} value={htmlType} isField={isField} style={{ width: '100%' }}></FieldHtmlType>
                        <FieldType ecId={`${this && this.props && this.props.ecId || ''}_FieldType@2rigvs`} disabled={true} htmlType={htmlType} value={type} style={{ width: '100%' }}></FieldType>
                        <FieldDbType ecId={`${this && this.props && this.props.ecId || ''}_FieldDbType@sijfye`} disabled={true} fieldType={type && type.value} type={type} value={dbType} style={{ width: '100%' }}></FieldDbType>
                        {parentFieldName && <ParentFieldName ecId={`${this && this.props && this.props.ecId || ''}_ParentFieldName@3s3v6b`} disabled={true} value={parentFieldName} style={{ width: '100%' }}></ParentFieldName>}
                        <Selections ecId={`${this && this.props && this.props.ecId || ''}_Selections@qh2b69`} htmlType={htmlType} options={options}></Selections>
                        {type === 'image' && <ImageWidth ecId={`${this && this.props && this.props.ecId || ''}_ImageWidth@9k0dpx`} onChange={changeImageWidth} value={imageWidth}></ImageWidth>}
                        {type === 'image' && <ImageHeight ecId={`${this && this.props && this.props.ecId || ''}_ImageHeight@81oasd`} onChange={changeImageHeight} value={imageHeight}></ImageHeight>}
                        {type === 'text' && <TextLength ecId={`${this && this.props && this.props.ecId || ''}_TextLength@uofpmd`} onChange={changeTextLength} value={textLength}></TextLength>}
                        {type === 'float' && <FloatLength ecId={`${this && this.props && this.props.ecId || ''}_FloatLength@b9kud9`} onChange={changeFloatLength} value={floatLength} hasData={hasData}></FloatLength>}
                        <FieldViewType ecId={`${this && this.props && this.props.ecId || ''}_FieldViewType@slanuv`} disabled={false || readonly} value={viewAttr || '2'} isField={isField} style={{ width: '100%' } } onChange={changeViewAttr}></FieldViewType>
                        <FieldVisible ecId={`${this && this.props && this.props.ecId || ''}_FieldVisible@jvra3w`} disabled={false || readonly} value={fieldVisible || '0'} isField={isField} style={{ width: '100%' } } onChange={changeFieldVisible}></FieldVisible>
                        {(showExpandType) && <ExpandType ecId={`${this && this.props && this.props.ecId || ''}_ExpandType@jb0xhe`} value={expandType} onChange={changeExpandType}></ExpandType>}
                        {table && table.bindingPath() && isField && <AddRow ecId={`${this && this.props && this.props.ecId || ''}_AddRow@gqyrv0`} isField={true} isAddRow={isAddRow} disabled={readonly} onChange={changeRowControl.bind(this,'add')} ></AddRow>}
                        {table && table.bindingPath() && isField && <DeleteRow ecId={`${this && this.props && this.props.ecId || ''}_DeleteRow@6mw154`} isField={true} isDeleteRow={isDeleteRow} disabled={readonly} onChange={changeRowControl.bind(this,'delete')} ></DeleteRow>}
                    </div>}
                </div>
            </div>
        )
    }
    clickItem = (key) => {
        const { store } = this.props;
        const { fieldProps } = store;
        fieldProps.selectedTabKey = key;
    }
}